<template>
    <el-dialog v-if="visible" title="课件列表" :visible.sync="visible" width="1380px" :before-close="handleClose">
        <el-tabs type="border-card" v-model="activeKey" @tab-click="handleClick">
            <el-tab-pane name="audio" label="音频课件列表">
                <TabPane v-if="activeKey == 'audio'" :type="activeKey" :select="true"
                    @onSelectionChange="onSelectionChange" />
            </el-tab-pane>
            <el-tab-pane name="video" label="视频课件列表">
                <TabPane v-if="activeKey == 'video'" :type="activeKey" :select="true"
                    @onSelectionChange="onSelectionChange" />
            </el-tab-pane>
            <el-tab-pane name="ppt" label="PPT课件列表">
                <TabPane v-if="activeKey == 'ppt'" :type="activeKey" :select="true"
                    @onSelectionChange="onSelectionChange" />
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
// 课件
import TabPane from './TabPane.vue';
export default {
    name: "SelectTabPane",
    components: {
        TabPane,
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            activeKey: 'audio',
            multipleSelection: []
        }
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false)
        },

        handleClick(tab, event) {
            this.activeKey = tab.name;
        },
        handleConfirm() {

            if (!this.multipleSelection.length) {
                this.$message.warning('请选择课件')
                return;
            }
            this.$emit('handleConfirm', this.multipleSelection)
        },
        onSelectionChange(val) {
            this.multipleSelection = [...val]
        }
    }

}
</script>
<style lang="scss" scoped></style>